[제이쿼리] find() 자식요소내의 요소 선택하기

제이쿼리를 사용해 자식요소를 선택하는 메소드로 find()를 사용할 수 있습니다. 아래는 제이쿼리의 메소드 find()에 대하여 자세히 알아봅니다.

# 제이쿼리 find() 메소드 알아보기

먼저 find() 함수는 선택된 요소의 자식 요소중 일치하는 자식요소를 찾아 반환하여 줍니다. children() 메소드가 바로 한단계 아래의 요소중에서 찾는다면 find()는 모든 자식 요소 내에서 찾은 후 반환한다는 점이 차이점입니다.

$(선택요소).find('찾을조건')


그럼 간단한 예제를 통해 알아보도록 하겠습니다. 만약 아래와 같은 소스코드가 있다고 할 경우 div 태그내의 모든 p태그를 찾으려면 어떻게 해야하는지 알아보겠습니다. 먼저 html 코드입니다.
@ find.html

아래는 스크립트 코드입니다.
@ find.js
제이쿼리를 사용해 변수 testEle에 div 태그의 자식요소중 p 태그를 모두 지정한 예제입니다. find()태그를 사용하면 자식 요소안에서만 찾을 수 있기 때문에 찾는 범위를 줄이고 오차 역시 줄일 수 있는 장점이 있습니다.

자식 요소안에서 찾는 함수중 filter() 함수도 존재합니다. 하지만 filter() 함수는 자식요소내에서 찾는것이 아닌 현재요소를 기준으로 범위를 줄여간다고 생각하시면 될 것 같습니다.

# 마치면서

여기까지 find() 메소드에 대하여 자세히 알아보았습니다. 자식 요소를 찾는 방법은 여러가지 있으나 find()는 가장 많이 사용되는 방법 중 하나입니다.

! find()는 자기 자신을 포함할까요?

find()를 사용할 경우 자기 자신은 포함하지 않으며 자식 요소에서만 찾을 수 있습니다. 만약 자기 자신을 포함하면서 자식요소까지 찾길 원하는 경우 parent()를 함께 사용할 수 있습니다. 예를들어 아래와 같습니다.

저 역시 궁금하여 테스트 해보았으나 자기 자신 요소는 제외되니 참고하세요.